<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { computed, ref } from 'vue'
import type { Patient } from '@/types/patient'
import { getPatient } from '@/services/patient'
import type { MedicineItem } from '@/types/medicine'
import { getMedicines } from '@/services/doctor'
import { PrescriptionC } from '@/types/prescriptionC'
import type { Prescription } from '@/types/prescription'
import { formatDate } from '@/utils/utils'
import { http } from '@/utils/http'

// 1、显示患者、药品列表
const prescription = ref<Prescription>(new PrescriptionC())
const patient = ref<Patient>()
const medicines = ref<MedicineItem[]>()

onLoad( async (query) => {
  patient.value = await getPatient(query!.id)
  prescription.value.patientId = patient.value!.id

  const medicinePage = await getMedicines()
  medicines.value = medicinePage.records

  setInterval(function() {
    prescribeDate.value = formatDate()
  }, 1000)
})

// 动态显示开处方时间
const prescribeDate = ref(formatDate())

// 2、选择药品
const medicine = ref<MedicineItem>()

function selectMedicine(i: number) {
  medicine.value = medicines.value![i]
  prescription.value.medicineId = medicine.value!.id
  prescription.value.medicineAmount = medicine.value!.price
}

const medicineAmount = computed(() => {
  return medicine.value!.price * prescription.value.medicineNum
})

// 3、开处方
async function prescribe() {
  prescription.value.medicineAmount = medicineAmount.value

  console.log('开处方：' ,prescription.value)

   const prescriptionId = await http<number>({
    method: 'POST',
    url: '/prescription/prescription',
    data: prescription.value,
  })
  console.log('处方id：', prescriptionId)

  await uni.showToast({
    title: '开处方成功', icon: 'success',
  })
  setTimeout(() => uni.navigateTo({
    url: '/pages/doctor/prescription/list',
  }), 1000)
}
</script>

<template>
  <view class="container">
    <view class="patient" v-if="patient">
      <view style="margin-bottom: 10px;">
        患者：{{patient.name}} 性别：{{patient.sex ===1 ? '男': '女'}} 年龄：{{patient.age}}
      </view>

      <view class="textarea-container">
        <view class="uni-title uni-common-pl">诊断：</view>
        <view class="uni-textarea">
          <textarea v-model="prescription.diagnosis" style="background-color: #F4f4f4" auto-height />
        </view>
      </view>
    </view>

    <view class="medicine-selected" v-if="medicine">
      <text>药品总额：</text>
      <text style="color: red">{{medicineAmount}}</text>

      <view class="medicine">
        <view class="goods-item">
          <!-- 商品左侧图片区域 -->
          <view class="goods-item-left">
            <image :src="medicine.cover" class="goods-pic"></image>
          </view>
          <!-- 商品右侧信息区域 -->
          <view class="goods-item-right">
            <!-- 商品标题 -->
            <view class="goods-name">{{medicine.medicineName}}</view>
            <view style="color: #999999;" class="goods-info">{{medicine.specificationPackaging}}</view>
            <view class="goods-info">有效期至：</view>
            <view class="goods-info-box">
              <!-- 商品价格 -->
              <view class="goods-price">￥{{medicine.price}}</view>
            </view>
          </view>
        </view>
        <view class="medicine-num medicine-other-info">
          <view>
            药品数量：
          </view>
          <uni-number-box v-model="prescription.medicineNum" :min="1" :input="false"></uni-number-box>
          <view style="margin-left: 10px;">
            盒
          </view>
        </view>
        <view class="medicine-other-info">
          用法用量：{{medicine.usageDosage}}
        </view>
        <view class="medicine-other-info">
          疗程：{{medicine.treatmentCourse}}
        </view>
      </view>
      <view class="uni-form-item uni-column">
        <view class="title">医生签名</view>
        <input class="uni-input" />
      </view>

      <view style="margin-top: 20px;" class="punch-time">处方时间：{{ prescribeDate }}</view>

      <button @click="prescribe" class="confirm-btn" type="warn">确认</button>
    </view>

    <view class="goods-list" v-else>
      <view v-for="(medicine, i) in medicines" :key="medicine.id" @click="selectMedicine(i)">
        <view class="goods-item">
          <!-- 商品左侧图片区域 -->
          <view class="goods-item-left">
            <image :src="medicine.cover" class="goods-pic"></image>
          </view>
          <!-- 商品右侧信息区域 -->
          <view class="goods-item-right">
            <!-- 商品标题 -->
            <view class="goods-name">{{medicine.medicineName}}</view>
            <view class="goods-info-box">
              <!-- 商品价格 -->
              <view class="goods-price">￥{{medicine.price}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.medicine-selected {
  background-color: #FFFFFF;
  margin-bottom: 10px;
  padding: 10px;
}

.container {
  padding: 10px;

  .patient {
    background-color: #FFFFFF;
    padding: 10px;
    border-bottom: 1px solid #f0f0f0;
  }
}

.textarea-container {
  display: flex;
  padding: 10px 0px;
  // border-bottom: 1px solid #f0f0f0;

  .uni-title {
    width: 60px;
    // margin-left: 5px;
  }

  textarea {
    width: 550rpx;
    height: 50px !important;
    padding: 10px;
  }
}

.medicine {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;

  .medicine-num {
    display: flex;
    align-items: center;
  }

  .medicine-other-info {
    margin-bottom: 10px;
  }
}

.uni-form-item {
  display: flex;
  margin-top: 20px;

  .uni-input {
    margin-left: 20px;
    background-color: #F4f4f4;
  }
}

.confirm-btn {
  line-height: 2;
  font-size: 16px;
  // background-color: #00e676;
  position: fixed;
  bottom: 5px;
  left: 20px;
  right: 10px;
  border-radius: 20px;
}

.goods-item {
  background-color: #FFFFFF;
  margin-top: 10px;
  display: flex;
  padding: 10px 0px;
  // border-bottom: 1px solid #f0f0f0;

  .goods-item-left {
    margin-right: 15px;

    .goods-pic {
      width: 100px;
      height: 100px;
      display: block;
    }
  }

  .goods-item-right {
    margin-right: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 16px;
    }

    .goods-info {
      font-size: 13px;
    }

    .goods-info-box {
      width: 100%;
      display: flex;
      justify-content: space-between;

      button {
        margin: 0;
      }
    }

    .goods-price {
      font-size: 16px;
      color: #c00000;
    }

    .icon-tianxie {
      font-size: 25px;
      color: #c00000;
    }
  }
}
</style>
